import React from 'react';
import styles from './LeftWrapper.less';

class LeftWrapper extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      basics: [
        { title: '行', name: 'AntdRow', imgPath: '/images/1.jpg' },
        { title: '列', name: 'AntdCol', imgPath: '/images/1.jpg' },
        { title: '间距', name: 'AntdSpace', imgPath: '/images/1.jpg' },
      ],
    };
  }
  render() {
    return (
      <div className={styles['container']}>
        <div className={styles['title']}>基础组件</div>
        <div className={styles['list-wrapper']}>
          {this.state.basics.map((item: any) => {
            return (
              <div
                key={item.name}
                className={styles['list-item']}
                draggable="true"
                onDragStart={(e) =>
                  this.onSourceDragStart(e, `basic.${item.name}`)
                }
              >
                <img src={item.imgPath} className={styles['image']} />
                <div className={styles['title']}>{item.title}</div>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
  onSourceDragStart(e: any, name: any) {
    //console.log(e);
    e.dataTransfer.dropEffect = 'move';
    e.dataTransfer.setData('text/plain', name);
  }
}
export default LeftWrapper;
